import { lazy, Suspense } from 'react'
import { BrowserRouter as Router, Route, Redirect } from "react-router-dom";

// 导入首页和城市选择页面
import Home from "./pages/Home";
// 权限控制高阶组件
import AuthRoute from "./components/AuthRoute";

// 动态导入组件
// import CityList from "./pages/CityList";
const CityList = lazy(() => import('./pages/CityList'))
// import Map from "./pages/Map"
const Map = lazy(() => import('./pages/Map'))
// import HouseDetail from "./pages/HouseDetail";
const HouseDetail = lazy(() => import('./pages/HouseDetail'))
// import Login from "./pages/Login";
const Login = lazy(() => import('./pages/Login'))
// import Register from "./pages/Register"
const Register = lazy(() => import('./pages/Register'))
// import Favorite from "./pages/Favorite";
const Favorite = lazy(() => import('./pages/Favorite'))
// import Rent from "./pages/Rent";
const Rent = lazy(() => import('./pages/Rent'))
// import RentAdd from "./pages/Rent/Add";
const RentAdd = lazy(() => import('./pages/Rent/Add'))
// import RentSearch from "./pages/Rent/Search";
const RentSearch = lazy(() => import('./pages/Rent/Search'))

function App() {
  return (
    <Router>
      <Suspense fallback={<div className="route-loading">loading...</div>}>
        <div className="App">
          {/* 默认路由重定向 */}
          <Route exact path="/" render={() => <Redirect to='/home' />}></Route>
          {/* 配置路由 */}
          <Route path="/home" component={Home}></Route>
          <Route path="/citylist" component={CityList}></Route>
          <Route path="/map" component={Map}></Route>
          <Route path="/detail/:id" component={HouseDetail}></Route>
          <Route path="/login" component={Login}></Route>
          <Route path="/register" component={Register}></Route>
          <AuthRoute path="/favorite" component={Favorite}></AuthRoute>
          <AuthRoute exact path="/rent" component={Rent}></AuthRoute>
          <AuthRoute path="/rent/add" component={RentAdd}></AuthRoute>
          <AuthRoute path="/rent/search" component={RentSearch}></AuthRoute>
        </div>
      </Suspense>
    </Router>
  );
}

export default App;
